/**
 * 用户管理页面配置
 * 包含表单字段配置和表格列配置
 */

import type { FormFieldConfig, TableColumnConfig, User } from '@/types'
import { h } from 'vue'
import { Tag } from 'ant-design-vue'

/**
 * FORM_FIELDS - 用户表单字段配置
 * 用于新增和编辑用户信息
 */
export const FORM_FIELDS: FormFieldConfig[] = [
  {
    name: 'username',
    label: '用户名',
    type: 'input',
    placeholder: '请输入用户名',
    required: true,
    rules: [
      { required: true, message: '请输入用户名' },
      { min: 3, max: 20, message: '用户名长度为 3-20 个字符' },
      { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' },
    ],
  },
  {
    name: 'email',
    label: '邮箱',
    type: 'email',
    placeholder: '请输入邮箱',
    required: true,
    rules: [
      { required: true, message: '请输入邮箱' },
      { type: 'email', message: '邮箱格式不正确' },
    ],
  },
  {
    name: 'password',
    label: '密码',
    type: 'password',
    placeholder: '请输入密码（编辑时不填则不修改）',
    required: false,
    rules: [
      { min: 6, message: '密码长度不少于 6 位' },
    ],
  },
  {
    name: 'phone',
    label: '手机号',
    type: 'input',
    placeholder: '请输入手机号',
    required: false,
    rules: [
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
    ],
  },
  {
    name: 'role',
    label: '角色',
    type: 'select',
    placeholder: '请选择角色',
    required: true,
    rules: [
      { required: true, message: '请选择角色' },
    ],
    options: [
      { label: '管理员', value: 'admin' },
      { label: '普通用户', value: 'user' },
      { label: '访客', value: 'guest' },
    ],
  },
  {
    name: 'status',
    label: '状态',
    type: 'select',
    placeholder: '请选择状态',
    required: true,
    defaultValue: 'active',
    rules: [
      { required: true, message: '请选择状态' },
    ],
    options: [
      { label: '启用', value: 'active' },
      { label: '禁用', value: 'inactive' },
    ],
  },
]

/**
 * TABLE_COLUMNS - 用户列表表格列配置
 * 用于渲染用户列表页面
 */
export const TABLE_COLUMNS: TableColumnConfig<User>[] = [
  {
    title: '用户ID',
    dataIndex: 'id',
    key: 'id',
    width: 80,
    align: 'center',
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
    width: 150,
    ellipsis: true,
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
    width: 200,
    ellipsis: true,
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    width: 130,
  },
  {
    title: '角色',
    dataIndex: 'role',
    key: 'role',
    width: 100,
    align: 'center',
    customRender: ({ text }: { text: string }) => {
      const roleMap: Record<string, { label: string; color: string }> = {
        admin: { label: '管理员', color: 'red' },
        user: { label: '普通用户', color: 'blue' },
        guest: { label: '访客', color: 'default' },
      }
      const role = roleMap[text] || { label: text, color: 'default' }
      return h(Tag, { color: role.color }, () => role.label)
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
    align: 'center',
    slots: { customRender: 'status' },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 180,
    sorter: true,
  },
  {
    title: '操作',
    key: 'action',
    width: 180,
    align: 'center',
    fixed: 'right',
    slots: { customRender: 'action' },
  },
]

/**
 * 角色选项
 */
export const ROLE_OPTIONS = [
  { label: '全部', value: '' },
  { label: '管理员', value: 'admin' },
  { label: '普通用户', value: 'user' },
  { label: '访客', value: 'guest' },
]

/**
 * 状态选项
 */
export const STATUS_OPTIONS = [
  { label: '全部', value: '' },
  { label: '启用', value: 'active' },
  { label: '禁用', value: 'inactive' },
]
